<template>
  <view class="container">
    <navigationBar 
      title="最近购买"
      statusBarBgColor=""
      backBarBgColor=""
    ></navigationBar>
    <view class="content">
      <view class="goods-item">
        <view class="goods-item-img">
          <image
            src="http://www.xwcyqc.com/uploads/allimg/240511/1-240511104ARM.png"
          ></image>
        </view>
        <view class="goods-text">路易威登褶皱牛皮金扣单肩斜挎链条包</view>
      </view>

      <scroll-view
        type="list"
        class="scroll-view"
        scroll-y="true"
        bindscrolltolower="onScrolltolower"
      >
        <view class="buy-item" v-for="item in dataList.purchases" :key="item.id">
          <view class="item">
            <image
              class="portrait"
              :src="item.avatarUrl"
              mode="aspectFill"
            ></image>
            <view class="nikeName">{{ item.nickName }}</view>
          </view>
          <view class="item">{{ item.fineness }}</view>
          <view class="item">¥{{ item.payAmount }}</view>
          <view class="item">{{ item.payTime }}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, reactive,ref, computed } from "vue";
import {onLoad} from "@dcloudio/uni-app";

const goodsId = ref(0)

onLoad(({id}) => {
	goodsId.value = Number(id)
})

onMounted(() => {
  getGoodsPurchase()
});

const dataList = reactive({
  purchases: [],
});

const getGoodsPurchase = async () => {
	let res = await goodsPurchase({goodsId:goodsId.value})
	dataList.purchases = res.list
}

</script>

<style lang='scss' scoped>
page {
  overflow: hidden;
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}
.container{
  width: 100vw;
  height: 100vh;
  background: white;
}
.scroll-view{
  height: calc(100vh - var(--status-bar-height) - 90rpx) !important;
}
.content {
  padding: 0 84rpx 0 24rpx;
  padding-top: calc(var(--status-bar-height) + 90rpx);
  box-sizing: border-box;
  .goods-item {
    @include flex(center, space-between);
    padding: 24rpx 0;

    box-sizing: border-box;
    .goods-item-img {
      @include wh(72rpx, 72rpx);
      @include flex(center, center);
      background: #f5f5f5;
      border-radius: 8rpx;
      image {
        @include wh(56rpx, 56rpx);
      }
    }

    .goods-text {
      @include wh(calc(100% - 72rpx - 24rpx));
      @include fonts(30rpx, #222222, bold);
      @extend %text-overflow;
    }
  }

  .buy-item {
    @include flex(center, space-between);
    @include fonts(28rpx, #222222);
    padding: 20rpx 0;
    box-sizing: border-box;
    .item {
      @include wh(20%);
      @include flex(center, flex-start);
      padding-left: 5rpx;
      box-sizing: border-box;
      .portrait {
        @include wh(48rpx, 48rpx);
        border-radius: 50%;
        margin-right: 16rpx;
      }
    }
    .item:first-child {
      @include wh(30%);
      padding-left: 0rpx;
    }
    .item:last-child {
      @include fonts(28rpx, #939395);
    }
  }
}
</style>